
<template>
  <!-- 商品评价 -->
  <div class="product-evaluate mt-10">
    <p class="flex-s-c">
      <span class="fs-28">评价({{ evaluateData.RecordAmout||0 }})</span>
      <span v-show="evaluateData.RecordAmout&&evaluateData.RecordAmout>0" class="color-gray-light arrow" @click="evaluateShow=true">查看全部</span>
    </p>
    <evaluateList :evaluate-list="evaluateData.Data" />
    <van-popup v-model="evaluateShow" position="bottom" class="full-width full-height ">
      <evaluatePopup :product-id="productId" @closeEvaluate="evaluateShow=false" />
    </van-popup>
  </div>
</template>

<script>
import evaluateList from 'components/productDetail/evaluateList'
import evaluatePopup from 'components/productDetail/evaluatePopup'
export default {
  name: 'ProductEvaluate',
  components: {
    evaluateList,
    evaluatePopup
  },
  props: {
    data: { // 数据
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    },
    productId: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      evaluateShow: false
    }
  },
  computed: {
    evaluateData() {
      var evaluateData = this.data
      if (evaluateData.Data && evaluateData.Data.length > 0) {
        evaluateData.Data.forEach(item => {
          if (item.Images) {
            item.ImagesList = item.Images.split('|')
          }
          var GradeInfo = {}
          GradeInfo.GradeName = item.GradeName
          GradeInfo.GradeLevel = 3
          item.GradeInfo = GradeInfo
        })
      }
      if (evaluateData.RecordAmout >= 1000) {
        evaluateData.RecordAmout = '1000+'
      } else if (evaluateData.RecordAmout >= 100) {
        evaluateData.RecordAmout = '100+'
      }

      return evaluateData
    }
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
// 评价
.product-evaluate{
  background: $colorF;
  padding: 30px 32px;
  .arrow{
    position: relative;
    padding-right: 20px;
    &:after{
      content:'';
      position: absolute;
      top: 10px;
      right: 0;
      width: 12px;
      height: 12px;
      border: 2px solid;
      border-color:$color9 $color9 transparent transparent;
      transform: rotate(45deg);
    }
  }
}
</style>
